<template>
  <div>
    <div class="book-deail">
      <div class="img">
        <el-image
          :src="bookInfo.bookCover"
          fit="fill"
          style="width: 100px; height: 150px"
        >
          <template #error>
            <div class="image-slot">
              <el-image
                style="width: 100px; height: 150px"
                :src="require('@/assets/img/bdefault.jpg')"
              ></el-image>
            </div>
          </template>
        </el-image>
      </div>
      <div class="info">
        <div class="title">{{ bookInfo.bookName }}</div>
        <div class="one">
          <div class="item"><span>作者：</span>{{ bookInfo.bookAuthor }}</div>
          <div class="item"><span>类型：</span>{{ bookInfo.bookKind }}</div>
          <div class="item"><span>状态：</span>{{ bookInfo.bookState }}</div>
        </div>
        <div class="one">
          <div class="item">
            <span>更新日期：</span>{{ bookInfo.createDate }}
          </div>
          <div class="item">
            <span>最新章节：</span
            ><span class="lastChaper" @click="readerBook(lastChapter)">{{
              lastChapter.chapterName
            }}</span>
          </div>
          <div class="item">
            <span>下载：</span>
            <span class="lastChaper">{{ bookInfo.bookName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="duce">{{ bookInfo.bookDuce }}</div>
    <div class="chater">
      <sys-chapter :chapter="chapter" @readBook="readerBook"></sys-chapter>
    </div>
    <template>
      <el-backtop :right="100" :bottom="100" />
    </template>
    <yu-dialog :data="dialogConfig" v-model:isShow="isShow">
      <sysReader :data="reader"></sysReader>
    </yu-dialog>
  </div>
</template>

<script setup>
import {
  reactive,
  toRef,
  ref,
  onMounted,
  getCurrentInstance,
  onBeforeMount,
} from 'vue';
import SysChapter from './SysBookChapter.vue';
import sysReader from './SysBookReader.vue';
let { proxy } = getCurrentInstance();
const props = defineProps({
  bookInfo: { type: Object, defult: {} },
});
let lastChapter = ref({});
let reader = ref({});
const chapter = ref([]);
const bookInfo = toRef(props, 'bookInfo');
const isShow = ref(false);
const dialogConfig = reactive({});
onBeforeMount(() => {
  getChapters();
});
const getChapters = async () => {
  await proxy.$api.rule.queryBookChapter(bookInfo.value).then(res => {
    debugger;
    chapter.value = res;
    lastChapter.value = chapter.value[chapter.value.length - 1];
  });
};
const readerBook = async chreader => {
  chreader.ruleId = bookInfo.value.ruleId;
  isShow.value = true;
  dialogConfig.title = chreader.chapterName;
  dialogConfig.width = '70%';
  await proxy.$api.rule.querySysBookReader(chreader).then(res => {
    debugger;
    reader.value = res;
  });
};
</script>
<style lang="scss" scoped>
.book-deail {
  height: 150px;
  width: 95%;
  border: 1px;
  padding: 5px 10px;
  margin: 0 auto;
  display: flex;
  .info {
    padding: 5px 10px;
    width: 90%;
    .title {
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: aliceblue;
      margin: 0 auto;
      font-size: 18px;
      font-weight: bold;
      color: chocolate;
    }
    .one {
      display: flex;
      padding: 15px 0em;
      font-size: 14px;
      .item {
        width: 30%;
      }
      .lastChaper {
        color: red;
        cursor: pointer;
      }
    }
  }
}
.duce {
  height: auto;
  width: 95%;
  margin: 0 auto;
}
</style>
